<style scoped>
.more_info{
  background: rgba(0,40,137,.5);
  background-repeat: no-repeat;
  background-image: url(./img/map_more_info_l.png),url(./img/map_more_info_r.png);
  background-size: 1vw 1vw, .5vw .5vw;
  background-position: top left,top right;
  position: absolute;
  right: 0;
  top: 0;
  width: 10.5vw;
  padding: 1.2vh 1vw;
  font-size: 1.7vh;
  line-height: 3.1vh;
}
.middle_top{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* z-index: -1; */
}
 .middle_top img.img1 {
    position: absolute;
    top: 0;
    left: 18%;
    height: 100%;
    /*width: 62%;*/
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-animation: MAINBGplay 10s linear infinite;
    -moz-animation: MAINBGplay 10s linear infinite;
    animation: MAINBGplay 10s linear infinite;
    opacity: 0.6;
}

 .middle_top img.img2 {
    position: absolute;
    top: 0;
    left: 18%;
    height: 100%;
    /*width: 62%;*/
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-animation: MAINBGplay1 10s linear infinite;
    -moz-animation: MAINBGplay1 10s linear infinite;
    animation: MAINBGplay1 10s linear infinite;
    opacity: 0.6;
}
@-webkit-keyframes MAINBGplay {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes MAINBGplay {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}

@keyframes MAINBGplay {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


@-webkit-keyframes MAINBGplay1 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
    }
}

@-moz-keyframes MAINBGplay1 {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(-360deg);
    }
}

@keyframes MAINBGplay1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
</style>
<template>
  <div style="height:100%;position:relative;">
    <!-- <div class="middle_top">
            <img src="./img/scale1.png" class="img1">
            <img src="./img/scale2.png" class="img2">
    </div> -->
    <div ref="XZMap" style="width: 100%; height: 100%" @mouseenter="stopPlay" @mouseleave="isAutoPlay?startPlay:''"></div>
    <div class="more_info" v-show="showDetail">
      <div class="flex_between"><span>退役军人</span><span>974</span></div>
      <div class="flex_between"><span>复原军人</span><span>464</span></div>
      <div class="flex_between"><span>残疾军人</span><span>93</span></div>
      <div class="flex_between"><span>伤残民兵民工</span><span>60</span></div>
    </div>
  </div>
  
</template>
<script>
export default {
  name: "XZMap",
  props: {
   data: Array,
    jsonUrl: String
  },
  data(){
      return {
          chartMap:null,
          option:null,
          timer: null,
          dataIndex:0,
          pointDatas:[],
        pointImg:'',

      }
  },
  watch: {
      jsonUrl(newVal,oldval){
           this.init();
      },
    data: {
      handler: function (val) {
        if (val) {
          this.data = val;
          this.init();
        }
      },
      deep: true,
    },
  },
  methods: {
    init() {
     var latlngDatas={}
      this.data.forEach(item => {
            var lng ={}
            lng[item.name]=[item.lng,item.lat]
          latlngDatas= Object.assign(latlngDatas,lng)
      });
     var mapDate = [{
        name: '江干区',
        value: [120.185, 30.274, 29999]
    },
    {
        name: '拱墅区',
        value: [120.182, 30.351, 29999]
    },
    {
        name: '西湖区',
        value: [120.091, 30.27, 29999]
    },
    {
        name: '滨江区',
        value: [120.21, 30.209, 29999]
    },
    {
        name: '萧山区',
        value: [120.254, 30.159, 29999]
    },
    {
        name: '余杭区',
        value: [120.295, 30.427, 29999]
    },
    {
        name: '富阳区',
        value: [119.956, 30.05, 29999]
    },
    {
        name: '桐庐县',
        value: [119.675, 29.784, 29999]
    },
    {
        name: '淳安县',
        value: [119.058, 29.613, 29999]
    },
    {
        name: '建德市',
        value: [119.28, 29.464, 29999]
    },
    {
        name: '临安区',
        value: [119.712, 30.227, 29999]
    },
    {
        name: '钱塘新区',
        value: [120.485, 30.284, 29999]
    }
];
      // var latlngDatas = {
      //   "太平街道": [121.356833, 28.352544],
      //   "城东街道": [121.401292, 28.397924],
      //   "城西街道": [121.349448, 28.389967],
      //   "城北街道": [121.379999, 28.448999],
      //   "横峰街道": [121.340993, 28.43304],
      //   "大溪镇"  : [121.248662, 28.474926],
      //   "温峤镇"  : [121.276073, 28.377816],
      //   "坞根镇"  : [121.262179, 28.313853],
      //   "石桥头镇": [121.434146, 28.334709],
      //   "城南镇"  : [121.372713, 28.302842],
      //   "泽国镇"  : [121.355041, 28.498006],
      //   "箬横镇"  : [121.503984, 28.385288],
      //   "滨海镇"  : [121.526881, 28.470255],
      //   "新河镇"  : [121.443909, 28.458097],
      //   "松门镇"  : [121.589174, 28.341877],
      //   "石塘镇"  : [121.606139, 28.280195]
      // }
      // this.pointDatas = this.data.filter(item=>item.value!=0).map((item) => {
      //   return {
      //     name: item.name,
      //     value: [latlngDatas[item.name][0],latlngDatas[item.name][1],item.value,item.ycj||0],
      //   };
      // });
    //    this.pointDatas = this.data.map((item) => {
    //     return {
    //       name: item.name,
    //       value: [latlngDatas[item.name][0],latlngDatas[item.name][1],item.value,item.ycj||0],
    //     };
    //   });
    //   // 异常数据整理
    //   var ycPointDatas = this.data.map(item =>{
    //     var data;
    //     if(item.ycj){
    //       data={
    //          name:item.name,
    //          value:[latlngDatas[item.name][0],latlngDatas[item.name][1],item.value,item.ycj]
    //       }
    //     }
    //       return data;
    //   })
    console.log(this.jsonUrl,"this.jsonUrl")
      $.get(this.jsonUrl,(json)=> {
        // this.chartMap && (this.chartMap.dispose())
        echarts.registerMap("hanzhou", json);
        this.chartMap = echarts.init(this.$refs["XZMap"]);
            this.option = {
            geo: {
                 map: 'hanzhou',
                // aspectScale: 0.75, //长宽比
                zoom: 1.1,
                roam: true,
                 itemStyle: {
                    normal: {
                        areaColor: '#a4d0ff',
                         color: '#333',
                         borderColor:"#fff",
                    },
                 }
            },
            series: [{
                    type: 'map',
                    roam: true,
                    itemStyle: {
                    normal: {
                        areaColor: '#a4d0ff',
                         color: '#333',
                         borderColor:"#fff",
                    },
                    emphasis: {
                        areaColor: '#5094f5',
                       borderColor:"#fff",
                        color: '#333',
                        label: {
                            show: false
                        }
                    }
                },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#333'
                            }
                        },
                        emphasis: {
                            textStyle: {
                                color: '#333'
                            }
                        }
                    },
                    zoom: 1.1,
                    roam: false,
                    map: 'hanzhou' //使用
                    // data: this.difficultData //热力图数据   不同区域 不同的底色
                },
               

            ]
        };
        this.chartMap.setOption(this.option);
        this.chartMap.on('click',(params)=>{
            this.EventBus.$emit('mapClick',params)
        })
         
      });
    },
  },
  mounted() {
    this.init();
  },

};
</script>
